<template>
  <div class="game-box flexac" style="justify-content: center">
    <div
      style="width: 24vw; height: 36vw; background-color: rgb(160, 160, 160)"
    >
      <!-- 上侧 -->
      <div
        style="
          padding: 1vw;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 22vw;
          height: 2vw;
          background-color: rgb(80, 80, 80);
        "
      >
        <div
          style="
            display: flex;
            justify-content: center;
            width: 6vw;
            color: #fff;
          "
        >
          时间:
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            width: 6vw;
            color: #f00;
          "
        >
          {{ secTime }}
        </div>
      </div>

      <!-- 下侧 -->
      <div style="padding: 1vw; width: 22vw; height: 30vw">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 22vw;
            height: 30vw;
          "
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 1.8vw;
              height: 1.8vw;
            "
            v-for="(item, index) of tableList"
            :key="'box' + index"
          >
            <div
              style="
                width: 90%;
                height: 90%;
                cursor: pointer;
                user-select: none;
              "
              :style="
                item.show == 2
                  ? 'background-color: #f00'
                  : item.show == 3
                  ? 'background-color: rgb(200,200,200)'
                  : ' background-color: rgb(100, 100, 100);'
              "
              @click="clickBox(item, index)"
              @contextmenu.prevent.stop="rightClick(item, index)"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 100%;
                "
                v-if="item.show == 3"
                :style="{
                  color:
                    item.leiNum == 1
                      ? '#3846ff'
                      : item.leiNum == 2
                      ? 'rgb(29,196,61)'
                      : item.leiNum == 3
                      ? '#f00'
                      : item.leiNum == 4
                      ? 'rgb(183,0,0)'
                      : '',
                }"
              >
                {{ item.leiNum == 0 ? "" : item.leiNum }}
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin: 10%;
                  width: 80%;
                  height: 80%;
                  border-radius: 50%;
                  background-color: red;
                "
                v-if="item.flag == 1"
              ></div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                "
                v-if="item.flag == 2"
              >
                ?
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="!gaming"
      @click="gameStart"
      style="
        padding: 1vw 3vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 15vw;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 1vw;
        background-color: rgb(140, 140, 140);
        cursor: pointer;
        user-select: none;
        color: #fff;
      "
    >
      开始
    </div>
    <div
      v-if="gaming"
      @click="gamePause"
      style="
        padding: 1vw 3vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 15vw;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 1vw;
        background-color: rgb(100, 100, 100);
        cursor: pointer;
        user-select: none;
        color: #fff;
      "
    >
      {{ pause ? "继续" : "暂停" }}
    </div>
    <div
      v-if="gaming"
      @click="gameOver"
      style="
        padding: 1vw 3vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 5vw;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 1vw;
        background-color: rgb(140, 140, 140);
        cursor: pointer;
        user-select: none;
        color: #fff;
      "
    >
      结束
    </div>
    <!-- <div style="position: absolute; right: 12.5vw; top: 25%" @click="getSuccess">
      直接获胜:
    </div> -->

    <div style="position: absolute; right: 12.5vw; top: 35%" v-if="!gaming">
      消耗时间:
      <span style="color: #f00">{{ conTime }}</span>
    </div>

    <div
      v-if="isSuccess"
      style="
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px;
        position: absolute;
        top: 40%;
        left: 50%;
        background-color: #fff;
        user-select: none;
      "
    >
      <div>恭喜你！完成游戏！</div>
      <div>
        耗时:<span style="color: #f00">{{ conTime }}</span
        >s
      </div>
    </div>
    <div
      v-if="isFail"
      style="
        padding: 20px;
        position: absolute;
        top: 40%;
        left: 50%;
        background-color: #fff;
        user-select: none;
      "
    >
      游戏结束！
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSuccess: false,
      isFail: false,
      gaming: false,
      pause: false,
      secTime: 0,
      conTime: 0,
      timer: null,
      tableList: [],
    };
  },
  watch: {
    tableList: {
      handler(newVal, oldVal) {
        let allClick = true;
        newVal.forEach((item, index) => {
          if (item.show == 1) {
            if (item.type != 2) {
              allClick = false;
            }
          }
        });

        if (allClick) {
          this.isSuccess = true;
          this.gameOver();
        }
      },
      deep: true,
    },
  },
  methods: {
    // 直接获胜
    getSuccess() {
      this.tableList.forEach((item, index) => {
        if (item.type == 1) {
          this.tableList[index].show = 3;
        }
      });
    },
    // 右键点击
    rightClick(item, index) {
      this.tableList[index].flag++;
      if (this.tableList[index].flag > 2) {
        this.tableList[index].flag = 0;
      }
    },
    // 点击格子
    clickBox(item, index) {
      if (this.pause) {
        return;
      }

      this.tableList[index].flag = 0;

      // 判断格子类型
      if (item.type == 2) {
        this.tableList[index].show = 2;
        this.isFail = true;
        this.gameOver();
      } else {
        this.tableList[index].show = 3;
      }

      let indexList = this.getBoxIndex(index);
      let leiNum = 0;
      indexList.forEach((item, index) => {
        if (this.tableList[item].type == 2) {
          leiNum++;
        }
        //  else if (this.tableList[item].type == 1) {
        //   this.tableList[item].show = 3;
        // }

        if (this.tableList[item].round == 1) {
          this.tableList[item].round = 2;
        }
      });
      this.tableList[index].leiNum = leiNum;
    },
    // 获取周边格子index
    getBoxIndex(str) {
      let indexList = [];
      let indexArr = [1, -1, 11, 12, 13, -11, -12, -13];
      console.log(str);

      if(str%12==0) {
        if(str==12) {
          indexArr = [-11,-12,1,12,13]
        }else if(str==0) {
          indexArr = [1,12,13]
        }else if(str==180) {
          indexArr = [-11,-12,1]
        }
      }else {
        if((str+1)%12==0) {
          if(str+1==12) {
            indexArr = [-1,11,12]
          }else if(str+1 == 192) {
            indexArr = [-1,-12,-13]
          }
        }
      }

      // console.log(indexArr);

      indexArr.forEach((item, index) => {
        if (str + item > 0 && str + item < 192) {
          indexList.push(str + item);
        }
      });
      return indexList;
    },
    // 获取格子内容
    getRandomLei() {
      this.tableList = [];
      let randomList = [];
      let dileiNum = 25;
      for (let i = 0; i < 192; i++) {
        this.tableList.push({
          value: i,
          type: 1,
          show: 1,
          round: 1,
          leiNum: 0,
          flag: 0,
        });
      }

      let randomWhile = true;
      while (randomWhile) {
        let same = false;
        let random = Math.floor(Math.random() * 192);
        randomList.forEach((item, index) => {
          if (item == random) {
            same = true;
          }
        });
        if (!same) {
          randomList.push(random);
        }

        if (randomList.length == dileiNum) {
          randomWhile = false;
        }
      }

      randomList.forEach((item, index) => {
        this.tableList[item].type = 2;
      });
    },
    // 游戏开始
    gameStart() {
      this.isSuccess = false;
      this.isFail = false;
      this.gaming = true;
      this.pause = false;
      this.getRandomLei();

      this.timer = setInterval(() => {
        this.secTime++;
      }, 1000);
    },
    // 游戏暂停
    gamePause() {
      this.pause = !this.pause;
      if (this.pause) {
        clearInterval(this.timer);
        this.timer = null;
      } else {
        this.timer = setInterval(() => {
          this.secTime++;
        }, 1000);
      }
    },
    // 游戏结束
    gameOver() {
      // this.tableList = [];

      this.gaming = false;
      this.pause = true;
      this.conTime = this.secTime;
      this.secTime = 0;
      clearInterval(this.timer);
      this.timer = null;
    },
  },
  mounted() {},
};
</script>

<style>
</style>